import React, { useState } from 'react';
import { Row, Col, Icon, Input, List, InputNumber, Progress, Form, Select, Menu, message, Badge } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import './style.css'
// import styles from './style.less'
import { AxButton } from '@/components/AxBase';
import { BasicListItemDataType } from './data';
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import IconFont from '@/assets/iconfont'
import { router } from 'umi';
import {
    AxEditableContext,
    AxEditableFormRow,
    AxEditableCellSimple,
} from '@/components/AxForm/AxFormItem';
import { axconst } from '@/shared/axconst';
import { AxTable } from '@/components/AxList';

const FormItem = Form.Item;
const { Option } = Select;
const titles = [
    'Alipay',
    'Angular',
    'Ant Design',
    'Ant Design Pro',
    'Bootstrap',
    'React',
    'Vue',
    'Webpack',
];
const avatars = [
    'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
    'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
    'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
    'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
    'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
    'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
    'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
    'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
];

const covers = [
    'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
    'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
    'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
    'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
];
const desc = [
    '那是一种内在的东西， 他们到达不了，也无法触及的',
    '希望是一个好东西，也许是最好的，好东西是不会消亡的',
    '生命就像一盒巧克力，结果往往出人意料',
    '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
    '那时候我只会想自己想要什么，从不想自己拥有什么',
];

const user = [
    '付小小',
    '曲丽丽',
    '林东东',
    '周星星',
    '吴加好',
    '朱偏右',
    '鱼酱',
    '乐哥',
    '谭小仪',
    '仲尼',
];

function fakeList(count: number): BasicListItemDataType[] {
    const list = [];
    for (let i = 0; i < count; i += 1) {
        list.push({
            id: `fake-list-${i}`,
            owner: user[i % 10],
            title: titles[i % 8],
            avatar: avatars[i % 8],
            cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
            status: ['active', 'exception', 'normal'][i % 3] as
                | 'normal'
                | 'exception'
                | 'active'
                | 'success',
            percent: Math.ceil(Math.random() * 50) + 50,
            logo: avatars[i % 8],
            href: 'https://ant.design',
            updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
            createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
            subDescription: desc[i % 5],
            description:
                '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
            activeUser: Math.ceil(Math.random() * 100000) + 100000,
            newUser: Math.ceil(Math.random() * 1000) + 1000,
            star: Math.ceil(Math.random() * 100) + 100,
            like: Math.ceil(Math.random() * 100) + 100,
            message: Math.ceil(Math.random() * 10) + 10,
            content:
                '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
            members: [
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
                    name: '曲丽丽',
                    id: 'member1',
                },
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
                    name: '王昭君',
                    id: 'member2',
                },
                {
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
                    name: '董娜娜',
                    id: 'member3',
                },
            ],
        });
    }

    return list;
}
const { Search } = Input;
const Purchase: React.FC<any> = props => {
    const [selectedKeys, setSelectedKeys] = useState<any>(['all']);
    const [count, setCount] = useState(2);

    const ListContent = ({
        data: { owner, createdAt, percent, status },
    }: {
        data: BasicListItemDataType;
    }) => (
        // <div className={styles.listContent}>
        //     <div className={styles.listContentItem}>
        <div>
            <div>
                <span>Owner</span>
                <p>{owner}</p>
            </div>
            {/* <div className={styles.listContentItem}>
                    <span>开始时间</span>
                    <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
                </div> */}
            {/* <div className={styles.listContentItem}> */}
            <div>
                <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
            </div>
        </div>
    );

    const list = fakeList(10);

    const owners = [
        {
            id: 'zly',
            name: '气体',
        },
        {
            id: 'ym',
            name: '剧毒',
        },
    ];

    const handleChangeOrder = (e: any) => {
        e && e.preventDefault();

        // (document.getElementsByClassName('ax-purchase-order') as any).forEach((i: any) => {
        //     i.className = 'ax-purchase-order';
        // });
        // e.currentTarget.className = 'ax-purchase-order ax-purchase-order-selected'
    }

    /** 加入收藏 */
    const handleInterest = () => {
        message.success('收藏成功');
    }

    /** 加入购物车 */
    const handleAddCart = (e: any, form: any) => {
        form.validateFields((error: any, values: any) => {
            if (error && error[e.currentTarget.id]) {
                return;
            }
            setCount(count + (values.count || 0));
            message.success('加入购物车成功');
        });
    }

    const columns = [
        {
            dataIndex: 'receiver',
            width: 110,
            render: (val: any) => {
                return (<img src='/img/timg.jpg' style={{ height: 110 }} />);
            },
        },
        {
            dataIndex: 'title',
            width: axconst.width.longx,
            render: (val: any, record: any) => {
                return (
                    <div style={{ marginLeft: 16 }}>
                        <h4 className='ant-list-item-meta-title'>
                            {val}
                        </h4>
                        <div className='ant-list-item-meta-description'>
                            {record.subDescription}
                        </div>
                        <div onClick={handleInterest}>
                            <span className='ax-interest'><Icon type="heart" />收藏</span>
                        </div>
                    </div>
                );
            },
        },
        {
            dataIndex: 'phone',
            width: axconst.width.long,
            render: (val: any, record: any) => {
                return (
                    <div>
                        <div>
                            <span>产品规格：AR</span>
                        </div>
                        <div>
                            <span>别名：醋酸;冰醋酸</span>
                        </div>
                        <div>
                            <span>分子式：醋酸;冰醋酸</span>
                        </div>
                        <div>
                            <span>纯度：90%</span>
                        </div>
                        <div>
                            <span>危险源：<span className='ax-manager'>易燃</span></span>
                        </div>
                    </div>
                );
            },
        },
        {
            dataIndex: 'userType3',
            width: axconst.width.long,
            render: (val: any, record: any) => {
                return (
                    <div>
                        <div>
                            <span>￥8.20</span>
                        </div>
                        <div>
                            <span>库存：9000</span>
                        </div>
                        <div>
                            <span>管控：非管控</span>
                        </div>
                    </div>
                );
            },
        },
        {
            dataIndex: 'userType2',
            width: axconst.width.long,
            render: (val: any, record: any) => {
                return (
                    <div>
                        <div>
                            <span>包装:1瓶</span>
                        </div>
                        <div>
                            <span>性状：固体</span>
                        </div>
                        <div>
                            <span>销量：0</span>
                        </div>
                        <div>
                            <span>分类编码：1093859-61-0</span>
                        </div>
                    </div>
                );
            },
        },
        {
            dataIndex: 'userType1',
            width: 130,
            render: (val: any, record: any) => {
                return (
                    <AxEditableFormRow>
                        <div>
                            <AxEditableCellSimple
                                style={{ width: 124 }}
                                precision={0}
                                step={1}
                                min={1}
                                cellType='number'
                                editing={true}
                                record={{ count: 1 }}
                                dataIndex='count'
                            />
                            <div>
                            </div>
                            <AxEditableContext.Consumer>{(form) => {
                                return (
                                    <AxButton
                                        className='ax-no-class'
                                        style={{ marginTop: 6 }}
                                        ghost
                                        onClick={(e: any) => handleAddCart(e, form)}>
                                        <Icon type="shopping-cart" />加入购物车
                                    </AxButton>
                                );
                            }}</AxEditableContext.Consumer>
                        </div>
                    </AxEditableFormRow >
                );
            },
        },
    ];

    return (
        <>
            <AxCard
                style={{ marginBottom: '15px', height: '100%', width: '72%', margin: '24px auto' }}
                bodyStyle={{ padding: 0 }}
            >
                <Row>
                    <Col span={6}>
                        {/* <img src='/img/logo.png' style={{ backgroundColor: '#1ca9e6' }} /> */}
                    </Col>
                    <Col span={12}>
                        <Search
                            placeholder="请输入商品名称、别名搜索"
                            onSearch={(val: any) => { }}
                            allowClear
                        />
                        {/* <p style={{ marginTop: 4 }}>可输入商品名称、别名</p> */}
                    </Col>
                    <Col span={6}>
                        <Badge count={count} overflowCount={10}>
                            <AxButton
                                className='ax-no-class'
                                style={{ marginLeft: 30 }}
                                ghost
                                onClick={() => router.push('/buyer/material/cart/data')}
                            >
                                我的购物车
                            <Icon type="shopping-cart" />
                            </AxButton>
                        </Badge>
                    </Col>
                </Row>
            </AxCard>
            <div style={{ borderBottom: '2px solid #409eff' }}>
                <AxCard
                    style={{ marginBottom: 15, height: '100%', width: 1390, margin: '0 auto' }}
                    bodyStyle={{ padding: 0 }}
                >
                    <span style={{ lineHeight: '46px' }}>成都是科隆化工厂 <a onClick={() => message.success('关注成功')}>【关注】</a></span>
                </AxCard>
            </div>
            <AxCard
                style={{ height: '100%', width: '72%', margin: '16px auto', marginBottom: 0 }}
                bodyStyle={{ padding: 0 }}
            >
                <StandardFormRow title="性状类型" block >
                    <FormItem>
                        <TagSelect>
                            <TagSelect.Option value="cat1">固体</TagSelect.Option>
                            <TagSelect.Option value="cat2">液体</TagSelect.Option>
                            <TagSelect.Option value="cat3">气体</TagSelect.Option>
                        </TagSelect>
                    </FormItem>
                </StandardFormRow>
                <StandardFormRow title="管控级别" block >
                    <FormItem>
                        <TagSelect>
                            <TagSelect.Option value="cat1">一级管控</TagSelect.Option>
                            <TagSelect.Option value="cat2">二级管控</TagSelect.Option>
                        </TagSelect>
                    </FormItem>
                </StandardFormRow>
                <StandardFormRow title="管控级别" block >
                    <FormItem>
                        <TagSelect>
                            <TagSelect.Option value="cat1">易燃</TagSelect.Option>
                            <TagSelect.Option value="cat2">易爆</TagSelect.Option>
                            <TagSelect.Option value="cat3">剧毒</TagSelect.Option>
                        </TagSelect>
                    </FormItem>
                </StandardFormRow>
                <StandardFormRow title='已选' block>
                    <FormItem>
                        <Select mode="multiple" placeholder="选择 owner" value={['ym', 'zly']}>
                            {owners.map((owner) => (
                                <Option key={owner.id} value={owner.id}>
                                    {owner.name}
                                </Option>
                            ))}
                        </Select>
                    </FormItem>
                </StandardFormRow>
            </AxCard>
            <AxCard
                style={{ marginBottom: 15, height: '100%', width: '72%', margin: '0 auto', borderTop: '1px solid #e8e8e8', borderBottom: '1px solid #e8e8e8' }}
                bodyStyle={{ padding: '6px 0px' }}
            >
                <a className='ax-purchase-order ax-purchase-order-selected' onClick={handleChangeOrder}>综合<IconFont type="iconsort-up" /></a>
                <a className='ax-purchase-order' onClick={handleChangeOrder}>销量<IconFont type="iconsort-up" /></a>
                <a className='ax-purchase-order' onClick={handleChangeOrder}>价格<IconFont type="iconsort-up" /></a>
                {/* <AxButton className='ax-no-class' type='link'>综合</AxButton>
                <AxButton className='ax-no-class' type='link'>价格</AxButton> */}
            </AxCard>
            <AxCard
                style={{ marginBottom: '15px', height: '100%', width: '72%', margin: '24px auto' }}
                bodyStyle={{ paddingLeft: 0, paddingRight: 0, paddingTop: 0 }}
            >
                <AxTable
                    size='default'
                    bordered={false}
                    showHeader={false}
                    checkboxModel={false}
                    columns={columns}
                    data={{
                        list: list
                    }}
                />
            </AxCard>
        </>
    );
};

export default Purchase;